package com.example.diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.diceroller.ui.theme.DiceRollerTheme

// 数据类：图片项
data class GalleryItem(
    val imageRes: Int,
    val title: String,
    val description: String
)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DiceRollerTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    ImageGalleryScreen(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ImageGalleryScreen(modifier: Modifier = Modifier) {

    // 图片数据列表 - 使用项目中已有的骰子图片
    val galleryItems = remember {
        listOf(
            GalleryItem(R.drawable.image1, "自然风光", "美丽的山水景色与蓝天白云"),
            GalleryItem(R.drawable.image2, "城市夜景", "繁华都市的灯火辉煌"),
            GalleryItem(R.drawable.image3, "海滩日落", "金色阳光洒在海面上"),
            GalleryItem(R.drawable.image4, "雪山美景", "壮丽的雪山与清澈湖泊"),
            GalleryItem(R.drawable.image5, "森林小径", "幽静的林间小路"),
            GalleryItem(R.drawable.image6, "田园风光", "宁静的乡村田野")
        )
    }

    // 当前选中的图片索引
    var currentIndex by remember { mutableStateOf(0) }

    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 应用标题
        Text(
            text = "风景图片陈列馆",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colorScheme.primary,
            modifier = Modifier.padding(bottom = 16.dp)
        )

        // 主图展示区域
        MainImageDisplay(
            galleryItem = galleryItems[currentIndex],
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        // 图片信息
        ImageInfo(
            galleryItem = galleryItems[currentIndex],
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        // 缩略图陈列
        ThumbnailGallery(
            items = galleryItems,
            currentIndex = currentIndex,
            onItemClick = { index -> currentIndex = index },
            modifier = Modifier
                .height(100.dp)
                .fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        // 控制按钮
        ControlButtons(
            onPrevious = {
                currentIndex = (currentIndex - 1 + galleryItems.size) % galleryItems.size
            },
            onNext = {
                currentIndex = (currentIndex + 1) % galleryItems.size
            },
            modifier = Modifier.fillMaxWidth()
        )
    }
}

@Composable
fun MainImageDisplay(
    galleryItem: GalleryItem,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier,
        shape = RoundedCornerShape(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            Image(
                painter = painterResource(id = galleryItem.imageRes),
                contentDescription = galleryItem.title,
                modifier = Modifier
                    .fillMaxSize()
                    .padding(32.dp),
                contentScale = ContentScale.Fit
            )

            // 半透明标题条
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.Black.copy(alpha = 0.6f))
                    .align(Alignment.BottomStart)
            ) {
                Text(
                    text = galleryItem.title,
                    color = Color.White,
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier
                        .padding(12.dp)
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

@Composable
fun ImageInfo(
    galleryItem: GalleryItem,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
    ) {
        Text(
            text = galleryItem.title,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colorScheme.primary
        )

        Spacer(modifier = Modifier.height(4.dp))

        Text(
            text = galleryItem.description,
            fontSize = 14.sp,
            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.7f)
        )
    }
}

@Composable
fun ThumbnailGallery(
    items: List<GalleryItem>,
    currentIndex: Int,
    onItemClick: (Int) -> Unit,
    modifier: Modifier = Modifier
) {
    Column(modifier = modifier) {
        Text(
            text = "风景欣赏",
            fontSize = 16.sp,
            fontWeight = FontWeight.SemiBold,
            modifier = Modifier.padding(bottom = 8.dp)
        )

        LazyRow(
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            modifier = Modifier.fillMaxWidth()
        ) {
            itemsIndexed(items) { index, item ->
                ThumbnailItem(
                    item = item,
                    isSelected = index == currentIndex,
                    onClick = { onItemClick(index) }
                )
            }
        }
    }
}

@Composable
fun ThumbnailItem(
    item: GalleryItem,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    // 修正：使用 Modifier.border 而不是 ButtonDefaults.outlinedButtonBorder
    val borderWidth = if (isSelected) 3.dp else 0.dp
    val borderColor = if (isSelected) MaterialTheme.colorScheme.primary else Color.Transparent

    Card(
        modifier = Modifier
            .size(80.dp)
            .border(
                width = borderWidth,
                color = borderColor,
                shape = RoundedCornerShape(12.dp)
            ),
        shape = RoundedCornerShape(12.dp),
        elevation = CardDefaults.cardElevation(
            defaultElevation = if (isSelected) 8.dp else 4.dp
        )
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .clickable { onClick() }
        ) {
            Image(
                painter = painterResource(id = item.imageRes),
                contentDescription = "缩略图",
                modifier = Modifier
                    .fillMaxSize()
                    .padding(8.dp),
                contentScale = ContentScale.Fit
            )
        }
    }
}

@Composable
fun ControlButtons(
    onPrevious: () -> Unit,
    onNext: () -> Unit,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(
            onClick = onPrevious,
            modifier = Modifier
                .weight(1f)
                .padding(end = 8.dp),
            shape = CircleShape
        ) {
            Text(text = "上一个")
        }

        Button(
            onClick = onNext,
            modifier = Modifier
                .weight(1f)
                .padding(start = 8.dp),
            shape = CircleShape
        ) {
            Text(text = "下一个")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ImageGalleryPreview() {
    DiceRollerTheme {
        ImageGalleryScreen()
    }
}